/**
 * layout 布局
 * @author leon
 * @create 2018-05-24 14:15:11
 */


/**
 *  w40 - w480 宽度
 *
 * for example
 * .w40 {
 *   width: 40px;
 * }
 *
 * .w480 {
 *   width: 480px;
 * }

 * ....
 */
@for $i from 5 through 60 {
    .w#{$i*8} {
        width: $i * 8 + px !important;
    }
}


/**
 *  ml8 - ml80 pl8 - pl80 .... 内边距和外边距
 *
 * for example
 * .ml32 {
 *   margin-left: 32px;
 * }
 *
 * .pb40 {
 *   padding-bottom: 40px;
 * }

 * ....
 */
@for $i from 1 through 10 {
    .ml#{$i*8}{
        margin-left: $i * 8 + px;
    }
    .mr#{$i*8}{
        margin-right: $i * 8 + px;
    }
    .mt#{$i*8}{
        margin-top: $i * 8 + px;
    }
    .mb#{$i*8}{
        margin-bottom: $i * 8 + px;
    }
    .pl#{$i*8}{
        padding-left: $i * 8 + px;
    }
    .pr#{$i*8}{
        padding-right: $i * 8 + px;
    }
    .pt#{$i*8}{
        padding-top: $i * 8 + px;
    }
    .pb#{$i*8}{
        padding-bottom: $i * 8 + px;
    }
}


// 自定义滚动条样式
.scroll {

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
        background-color: #e2e2e2;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 0;
        background-color: rgba(0, 0, 0, 0.3);
    }

    &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}
